<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>item_list</title>

    <!-- Bootstrap -->
    <!--<link th:href="@{/dataTables/css/dataTables.bootstrap.min.css}" rel="stylesheet">-->
    <link th:href="@{/datepicker/css/bootstrap-datepicker.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/custom/css/item_list.css}" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="text-center caption">
        <h2>喵 & 汪</h2>
        <div class="menu">
            <button class="btn btn-default" type="button" id="brandBtn">品牌管理</button>
            <button class="btn btn-default" type="button" id="keywordBtn">关键字管理</button>
        </div>
    </div>
    <div class="form-horizontal search">
        <div class="form-group">
            <label for="platformSelect" class="col-md-1 control-label">电商平台</label>
            <div class="col-md-2">
                <select class="form-control" id="platformSelect">
                    <option value="1" selected>淘宝</option>
                    <option value="2">京东</option>
                    <option value="3">拼多多</option>
                </select>
            </div>
            <label id="shoplable" for="isb2c" class="col-md-1 control-label">店铺类型</label>
            <div class="col-md-2">
                <select class="form-control" id="isb2c">
                    <option value="-1">全部</option>
                    <option value="0">淘宝</option>
                    <option value="1">天猫</option>
                </select>
            </div>
            <label class="col-md-1 control-label">日期</label>

            <div class="col-md-2">
                <div class="input-group date" data-provide="datepicker">
                    <input type="text" class="form-control" id="startDate">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="input-group date" data-provide="datepicker">
                    <input type="text" class="form-control" id="endDate">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="brandSelect" class="col-md-1 control-label">品牌</label>
            <div class="col-md-2">
                <select class="form-control" id="brandSelect">
                    <option value="0" selected>全部</option>
                </select>
            </div>
            <label for="keywordSelect" class="col-md-1 control-label">关键字</label>
            <div class="col-md-2">
                <select class="form-control" id="keywordSelect">
                    <option value="0" selected>全部</option>
                </select>
            </div>
            <label for="cordonflag" class="col-md-1 control-label">价格</label>
            <div class="col-md-2">
                <select class="form-control" id="cordonflag">
                    <option value="-2">全部</option>
                    <option value="1">大于</option>
                    <option value="0">等于</option>
                    <option value="-1">小于</option>
                </select>
            </div>
            <!--<label for="cordonInput" class="col-md-1 control-label"></label>-->
            <div class="col-md-2">
                <input class="form-control" id="cordonInput" value="" readonly/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-2 col-md-offset-5 text-center">
                <button class="btn btn-default" type="button" id="queryBtn" data-toggle="modal" data-target="">
                    查询
                </button>
                <button class="btn btn-default" type="button" id="exportBtn">导出</button>
                <!--<button class="btn btn-default" type="button" id="test">测试</button>-->
            </div>
        </div>
    </div>
    <div class="tablediv">
        <table id="itemTable" class="table table-hover table-condensed table-bordered">
            <thead>
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>店铺昵称</th>
                <th>价格</th>
                <th>付款数</th>
                <th>评价数</th>
                <th>地区</th>
                <th>日期</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!--<div class="modal-header">-->
                    <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
                    <!--<h4 class="modal-title" id="myModalLabel"></h4>-->
                <!--</div>-->
                <div class="modal-body" id="message"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/bootstrap/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/datepicker/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/datepicker/js/bootstrap-datepicker.zh-CN.min.js}"></script>
<!--<script th:src="@{/dataTables/js/jquery.dataTables.min.js}"></script>-->
<!--<script th:src="@{/dataTables/js/dataTables.bootstrap.min.js}"></script>-->

<script type="text/javascript">
    function plateformChange() {
        if (1 == $('#platformSelect').val()) {
            $('#shoplable').removeClass('invisible');
            $('#isb2c').removeClass('invisible');
        } else {
            $('#shoplable').addClass('invisible');
            $('#isb2c').addClass('invisible');
        }
    }

    function getBrandAjax() {
        $.ajax({
            url: "/brand",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                for (let el of result) {
                    $("#brandSelect").append("<option value='" + el.id + "'>" + el.brandName + "</option>");
                }
            }
        })
    }

    function getKeywordAjax(vbrand) {
        if (vbrand > 0) {
            $.ajax({
                url: "/keyword/brandId/" + vbrand,
                dataType: 'json',
                success: function (result) {
                    $('#keywordSelect').html('');
                    $("#keywordSelect").append("<option value='0'>全部</option>");
                    if (result != null && result.length > 0) {
                        for (let el of result) {
                            $("#keywordSelect").append("<option value='" + el.id + "'>" + el.keywordName + "</option>");
                        }
//                        getCordonAjax(result[0].id);
                    } else {
//                        $("#keywordSelect").append("<option value='0'>无</option>");
                    }
                }
            })
        } else {
//            $('#keywordSelect').html('');
//            $('#keywordSelect').append("<option value='0' >请选择品牌</option>");
//            $('#cordonInput').val('');
        }
    }

    function getCordonAjax(vkeyword) {
        $.ajax({
            url: '/keyword/id/' + vkeyword,
            dataType: 'json',
            success: function (result) {
                $('#cordonInput').val(result[0].keywordCordon);
            }
        })
    }

    var tb_title = "<thead><th width='4%'>序号</th><th width='47%'>商品名称</th><th width='12%'>店铺昵称</th><th width='7%'>价格</th><th width='6%'>付款数</th><th width='6%'>评价数</th><th width='10%'>地区</th><th width='8%'>日期</th></thead><tbody></tbody>"
    var jd_title = "<thead><th width='4%'>序号</th><th width='60%'>商品名称</th><th width='15%'>店铺昵称</th><th width='7%'>价格</th><th width='6%'>付款数</th><th width='8%'>日期</th></thead><tbody></tbody>"

    function tableAjax(param) {
        $.ajax({
            type: 'post',
            url: "/items",
            contentType: "application/json",
            data: "json",
            data: JSON.stringify(param),
            cache: false,
            success: function (result) {
                $('table').html('');
                var size = result.length;
                var platformid = $("#platformSelect").val();
                if (1 == platformid) {
                    $('table').append(tb_title);
                    if (size > 0) {
                        for (var i = 0; i < size; i++) {
                            $('tbody').append("<tr>" +
                                "<td>" + (i + 1) + "</td>" +
                                "<td><a href='" + result[i].url + "' target='_blank'>" + result[i].itemName + "</a></td>" +
                                "<td>" + result[i].shopName + "</td>" +
                                "<td>" + result[i].price + "</td>" +
                                "<td>" + (result[i].saleCount == null ? '' : result[i].saleCount) + "</td>" +
                                "<td>" + result[i].commentCount + "</td>" +
                                "<td>" + result[i].location + "</td>" +
                                "<td>" + result[i].datetime + "</td>" +
                                "</tr>");
                        }
                    } else {
                        $('tbody').append("<tr><td colspan='8'>无数据</td></tr>");
                    }
                }
                else if (2 == platformid) {
                    $('table').append(jd_title);
                    if (size > 0) {
                        for (var i = 0; i < size; i++) {
                            $('tbody').append("<tr>" +
                                "<td>" + (i + 1) + "</td>" +
                                "<td><a href='" + result[i].url + "' target='_blank'>" + result[i].itemName + "</a></td>" +
                                "<td>" + result[i].shopName + "</td>" +
                                "<td>" + result[i].price + "</td>" +
                                "<td>" + (result[i].saleCount == null ? '' : result[i].saleCount) + "</td>" +
                                "<td>" + result[i].datetime + "</td>" +
                                "</tr>");
                        }
                    }
                    else {
                        $('tbody').append("<tr><td colspan='6'>无数据</td></tr>");
                    }
                }
            }
        })
    }

    $(function () {
        $('.date').datepicker({
            autoclose: true,
            format: 'yyyy-mm-dd',
            language: 'zh-CN'
        });
        // 页面初始化时加载
        plateformChange();
        getBrandAjax();

        // 品牌管理
        $('#brandBtn').click(function () {
            window.location.href = "/brands";
        })

        // 关键字管理
        $('#keywordBtn').click(function () {
            window.location.href = "/keywords";
        })

        // 查询
        $('#queryBtn').click(function () {
            var platformid = $('#platformSelect').val();
            var isb2c = $('#isb2c').val();
            var brandid = $('#brandSelect').val();
            if (0 == brandid) {
                $("#message").html("请选择品牌!")
                $('#myModal').modal('show');
                return false;
            }
            var keywordid = $('#keywordSelect').val();
            var keywordCordon = $('#cordonInput').val();
            var cordonflag = $('#cordonflag').val();
            var sdate = $('#startDate').val();
            var edate = $('#endDate').val();

            var params = {
                platformId: platformid,
                isb2c: isb2c,
                brandId: brandid,
                keywordId: keywordid,
                cordonFlag: cordonflag,
                keywordCordon: keywordCordon,
                startDate: sdate,
                endDate: edate
            }
            tableAjax(params);
        });

        // 导出
        $('#exportBtn').click(function () {
            if ($("table tbody tr").length == 0) {
                $("#message").html("查询结果为空，请重新查询!")
                $('#myModal').modal('show');
                return false;
            }
            var platformid = $('#platformSelect').val();
            var isb2c = $('#isb2c').val();
            var brandid = $('#brandSelect').val();
            var keywordid = $('#keywordSelect').val();
            var keywordCordon = $('#cordonInput').val();
            var cordonflag = $('#cordonflag').val();
            var sdate = $('#startDate').val();
            var edate = $('#endDate').val();
            var param = {
                platformId: platformid,
                isb2c: isb2c,
                brandId: brandid,
                keywordId: keywordid,
                cordonFlag: cordonflag,
                keywordCordon: keywordCordon,
                startDate: sdate,
                endDate: edate
            }

            var url = '/items/export';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);    // 也可以使用POST方式，根据接口
            xhr.responseType = "blob";// 返回类型blob
            xhr.setRequestHeader("Content-Type", "application/json");

            // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
            xhr.onload = function () {
                // 请求完成
                if (this.status === 200) {
                    // 返回200
                    var blob = this.response;
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
                    reader.onload = function (e) {
                        // 转换完成，创建一个a标签用于下载
                        var a = document.createElement('a');
                        a.download = 'items.xls';
                        a.href = e.target.result;
                        $("body").append(a);  // 修复firefox中无法触发click
                        a.click();
                        $(a).remove();
                    }
                }
            };
            // 发送ajax请求
            xhr.send(JSON.stringify(param));
        })

        //  Ajax
        $('#platformSelect').change(function () {
            plateformChange();
        })
        $("#brandSelect").change(function () {
            getKeywordAjax($(this).val());
        })
        $("#keywordSelect").change(function () {
            getCordonAjax($(this).val());
        })

        $('#myModal').on('hidden.bs.modal', function (e) {
//            if (!data) return e.preventDefault();
        })

    })
</script>
</body>
</html>